import easeOut from 'ol/easing'
import Circle from 'ol/style/circle'
import Style from 'ol/style/style'
import Stroke from 'ol/style/stroke'
import unByKey from 'ol/observable'
import Vue from 'vue'
import poin from './glint'
const point = {
  points: function (isShow, features) {
    let map = Vue.prototype.$vuexStore.getters.getMapObj
    var duration = 3000
    // let time=setInterval(add,3000);



    if (isShow) {
      if (poin.state.pointsId !== null) {
        clearInterval(poin.state.pointsId)
      }
      poin.state.pointsId = setInterval(function () {
        for (let feature in features) {
          flash(features[feature])
        }
      }, 3000)
    } else {
      if (poin.state.pointsId !== null) {
        clearInterval(poin.state.pointsId)
      }
    }
    function flash (feature) {
      var start = new Date().getTime()
      var listenerKey = map.on('postcompose', animate)

      function animate (event) {
        var vectorContext = event.vectorContext
        var frameState = event.frameState
        var flashGeom = feature.getGeometry().clone()
        var elapsed = frameState.time - start
        var elapsedRatio = elapsed / duration
        // radius will be 5 at start and 30 at end.
        var radius = easeOut.easeOut(elapsedRatio) * 25 + 5
        var opacity = easeOut.easeOut(1 - elapsedRatio)

        var style = new Style({
          image: new Circle({
            radius: radius,
            snapToPixel: false,
            stroke: new Stroke({
              color: 'rgba(255, 0, 0, ' + opacity + ')',
              width: 0.25 + opacity
            })
          })
        })

        vectorContext.setStyle(style)


        vectorContext.drawGeometry(flashGeom)
        if (elapsed > duration) {
          unByKey.unByKey(listenerKey)
          return
        }

        map.render()
      }
    }
    // clearInterval(time);
  }
}

export default point
